<script setup>
import router from "../router/index.js";
import { ref, reactive } from "vue";
import { RouterView } from "vue-router";
import { Search,RefreshLeft } from "@element-plus/icons-vue";
import request from "../utils/request.js";
import {useUserStore} from "../stores/user.js"
import { ElMessage } from "element-plus";

// 分页功能，模糊查询
const current = ref(1);
const size = ref(8);
const total = ref(0);
// 搜索框的双向绑定值，用于模糊查询，默认为空
const name = ref("");

const data = reactive({
  // table表格展示的数据
  booklistData: [],
});

const show = () => {
  request
    .get("/selectBookByPage", {
      params: {
        name: name.value,
        current: current.value,
        size: size.value,
      },
    })
    .then((res) => {
      // res不为空展示数据，为空证明未登录或者过期
      if (res) {
        // 将分页查询到的数据存入数组中
        // console.log(res);
        data.booklistData = res.data.records;
        total.value = res.data.total;
      }
    });
};
show();

// 重置
const reset = () => {
  current.value = 1;
  name.value = "";
  show();
};


// 分页查询相关函数
const next_click = (row) => {
  current.value = row;
  // console.log();
  show();
};

const prev_click = (row) => {
  current.value = row;
  show();
};

const handleCurrentChange = (row) => {
  current.value = row;
  show();
};

// 查看详情页
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";

const bookxq = reactive({});

const showXq = (book) => {
  dialogFormVisible.value = true;
  bookxq.value = book;
  // console.log(book);
  // console.log(form.value.name);
};

const token = ref()
const buyBook = (book) =>{
  token.value = useUserStore().getToken;
  if(token.value === ""){
    ElMessage.error("请先登录")
  }
}
const borrow = () =>{
  ElMessage.error("请先登录")
}

const login = () =>{
  router.push("/login")
}

const register = () =>{
  router.push("/register")
}
</script>
<template>
  <div>
    <!-- 头部 -->
    <div class="top">
      <div class="top_l">
        <el-input
          v-model="name"
          placeholder="请输入"
          style="width: 500px; border: 1px solid orange; margin-right:5px"
        />
        <el-icon :size="25" style="vertical-align: middle" @click="show()"><Search /></el-icon>
        <!-- 重置 -->
          <el-button type="primary" @click="reset" style="margin-left:60px">
            <el-icon><RefreshLeft /></el-icon>
            <span>重置</span>
          </el-button>
      </div>
      <div class="top_r">
        <el-button type="primary" @click="login()">登录</el-button>

        <el-button type="primary" @click="register()">注册</el-button>
      </div>
    </div>
    <div class="main">
      <!-- 通过v-for，弹性盒布局循环展示书籍 -->
      <div class="books">
        <div class="b" v-for="book in data.booklistData" :key="book">
          <div class="img">
            <!-- 这个时候不用value.什么什么，因为booklistData是在data里面 -->
            <img :src="book.photo" alt="" />
          </div>
          <div class="jianjie">
            <div>
              书名：
              <span style="font-weight: 900">{{ book.bookName }}</span>
            </div>
            <div>
              作者：
              <span style="font-weight: 900">{{ book.writer }}</span>
            </div>
          </div>
          <div class="option">
            <el-button type="primary" @click="showXq(book)">
              查看详情
            </el-button>
            <!-- <el-button type="primary" @click="addShopCar(book)">加入购物车</el-button> -->
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          small
          background
          :pager-count="8"
          layout="prev, pager, next"
          :total="total"
          :page-size="size"
          @current-change="handleCurrentChange"
          class="mt-4"
          @next-click="next_click"
          @prev-click="prev_click"
        />
      </div>
      <!-- 详情页面的对话框 -->
      <el-dialog v-model="dialogFormVisible" title="Shipping address">
        <el-form :model="bookxq">
          <el-form-item label="封面" :label-width="formLabelWidth">
            <!-- 这个时候就需要value，因为是单独const定义的 -->
            <img
              :src="bookxq.value.photo"
              alt=""
              style="width: 200px; height: 150px; margin-left: 50px"
            />
          </el-form-item>
          <el-form-item label="书名" :label-width="formLabelWidth">
            <el-input v-model="bookxq.value.bookName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="作者" :label-width="formLabelWidth">
            <el-input v-model="bookxq.value.writer" autocomplete="off" />
          </el-form-item>
          <el-form-item label="简介" :label-width="formLabelWidth">
            <el-input v-model="bookxq.value.detail" autocomplete="off" />
          </el-form-item>
          <el-form-item label="价格" :label-width="formLabelWidth">
            <el-input v-model="bookxq.value.bookPrice" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="buyBook(bookxq)"> 购买 </el-button>
            <el-button type="primary" @click="borrow()"> 借阅 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style>
/* display:flex  布局是最常用的 */

.top {
  /* 设置最小宽度，防止窗口缩小后，界面乱套 */
  display: flex;
  min-width: 800px;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ccc;
  background-color: aliceblue;
}
.top_l {
  box-sizing: border-box;
  flex: 1;
  min-width: 800px;
  color: dodgerblue;
  font-weight: bold;
  padding-left: 80px;
}
.top_r {
  min-width: 200px;
  text-align: right;
  padding-right: 10px;

  padding-right: 40px;
}

.books {
  min-width: 800px;
  min-height: 550px;
  background-color: orange;
  display: flex;
  /* 换行 */
  flex-wrap: wrap;
  /* 子元素环绕 */
  justify-content: space-around;
  padding: 10px;
  margin-bottom: 5px;
}
.books .b {
  width: 250px;
  height: 250px;
  margin: 10px;
  background-color: burlywood;
}
.books .b img {
  width: 200px;
  height: 150px;
  margin-left: 35px;
  margin-top: 10px;
}
</style>